<template>
    <div class='msg-container'>
        <div class="userlist">
            <span v-if="!tag" class="not-online">暂无聊天用户...</span>
            <div class="user-item" v-for="memberInfo in memberInfoList">
                <div class="head-img">
                    <img :src="memberInfo.header" alt="" @click="changeExchange(memberInfo.id)">
                </div>
                <div class="nickname" @click="changeExchange(memberInfo.id)">
                    {{ memberInfo.nickname }}
                </div>
                <div :class="memberInfo.online ? 'online' : 'not-online'" @click="changeExchange(memberInfo.id)">
                    {{ memberInfo.online ? "当前在线" : "当前离线" }}
                </div>
                <div class="delete" @click="deleteExchange(memberInfo.id)">
                    删除
                </div>
            </div>
        </div>
        <div class="message-main" v-if="tag">
            <exchangeVue :receive-id="receiveId"></exchangeVue>
        </div>
        <div v-if="!tag" class="message-main">
            <el-empty :image-size="400"></el-empty>
        </div>
    </div>
</template>
<script>

import exchangeVue from './exchange.vue';

export default {
    name: 'message',
    data() {
        return {
            receiveId: null,
            memberVo: [],
            memberInfoList: [],
            tag: false,

        };
    },
    components: {
        exchangeVue
    },
    methods: {

        /**
         * 删除
         * @param {*} memberId 
         */
        async deleteExchange(memberId) {
            let temp = false
            this.tag = false
            await this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/sendreceive/deleteSendReceive?memberId=${this.memberVo.id}&beingMemberId=${memberId}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    temp = true
                }
            })
            if ( temp ){
                await this.init()
            }
        },


        /**
         * 选择交流的会员
         * @param {*} memberId 
         */
        changeExchange(memberId) {
            this.tag = false;
            this.receiveId = memberId;
            this.init()
            this.tag = true;
            console.log(this.receiveId)
        },


        /**
         * 获得与之交流得所有用户
         */
        async getChatNumber() {
            await this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/memberexchange/getChatNumber?memberId=${this.memberVo.id}`),
                method: 'post'
            }).then(({ data }) => {
                if (data.code == 200) {
                    console.log(data.data)
                    this.memberInfoList = data.data == null ? [] : data.data
                }
            })
        },



        /**
         * 初始化
         */
        async init() {
            // 直接点击进来的
            let member = await this.$memberInfo();
            if (member != null) {
                this.memberVo = member
                await this.getChatNumber()
                console.log(this.memberInfoList)
                // 如果获得数据，默认选择第一条
                if (this.memberInfoList.length > 0 && this.receiveId == null) {
                    
                    // 优先选择外部跳进来的
                    let temp_to = this.$route.query.temp_to
                    console.log(temp_to)
                    if (this.receiveId == null && temp_to != null && temp_to != undefined) {
                        this.receiveId = temp_to
                        console.log(this.receiveId)
                        this.tag = true
                    }

                    if (this.receiveId == null) {
                        this.tag = true
                        this.receiveId = this.memberInfoList[0].id
                    }

                }
            }

        },

    },


    async created() {
        await this.init()
    }
}
</script>

<style scoped>
@import url("../../utils/css/message.css");
</style>